<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智能机票预订系统</title>
    <link rel="stylesheet" href="/static/css/style.css">
</head>
<body>
    <div class="container">
        <header>
            <h1>智能机票预订系统</h1>
            <p>基于LangGraph的智能对话订票助手</p>
        </header>

        <div class="chat-container">
            <div class="chat-messages" id="chatMessages">
                <div class="system-message">
                    <p>👋 您好！欢迎使用智能机票预订系统。请告诉我您的出行计划，例如：</p>
                    <ul>
                        <li>"我想订一张明天去北京的机票"</li>
                        <li>"帮我预订下周五从上海到广州的商务舱机票，两人"</li>
                    </ul>
                </div>
            </div>

            <div class="user-input">
                <textarea id="userInput" placeholder="请输入您的订票需求..." rows="3"></textarea>
                <button id="sendButton">发送</button>
            </div>
        </div>

        <div class="booking-options" id="bookingOptions" style="display: none;">
            <button class="option-button confirm" data-choice="confirm">确认订票</button>
            <button class="option-button cancel" data-choice="cancel">取消订票</button>
        </div>

        <div class="connection-status" id="connectionStatus"></div>

        <footer>
            <p>© 2025 智能机票预订系统 | 基于LangGraph技术</p>
        </footer>
    </div>

    <script src="/static/js/script.js"></script>
</body>
</html>
